<template>
  <div class="home">
    <div class="nav">
      <div>金软云电票平台</div>
      <div style="margin-left: auto">税号：{{ taxpayerNum }}</div>
      <div style="margin-left: 20px">当前企业：{{ deptName }}</div>
      <div class="right-menu">
        <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          trigger="click"
        >
          <div class="avatar-wrapper">
            <img src="@/assets/defaultAvatar.png" class="user-avatar" />
            <i class="el-icon-caret-bottom" style="color: #fff" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleResetPwd">
              <span>重置密码</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- <img
        src="@/assets/defaultAvatar.png"
        style="width: 30px; height: 30px; object-fit: cover; margin-left: 10px"
      /> -->
    </div>
    <div class="home-con">
      <div style="display: flex; align-items: center">
        <div style="display: flex; align-items: center; font-weight: 600">
          <div>已累计核销</div>
          <div
            style="
              color: #ff411f;
              font-size: 25px;
              font-weight: 600;
              margin: 0 10px;
            "
          >
            {{ num }}
          </div>
          <div>张</div>

          <div style="margin-left: 30px">剩余核销条数</div>
          <div
            style="
              color: #ff411f;
              font-size: 25px;
              font-weight: 600;
              margin: 0 10px;
            "
          >
            {{ limitCount }}
          </div>
          <div>条</div>
          <div style="margin-left: 20px">
            <el-button style="width: 100px" type="primary" size="small"
              >充值</el-button
            >
          </div>
          <!-- <div style="margin-left: 20px">
            <el-button type="primary" size="small" icon="el-icon-printer"
              >打印体验</el-button
            >
          </div> -->
        </div>
        <div class="company">
          <div>
            <div>当前企业：{{ deptName }}</div>
            <div style="margin-top: 3px">税号：{{ taxpayerNum }}</div>
          </div>
          <div class="company-but" @click="goPath('company')">
            <div>切换</div>
            <div>企业</div>
          </div>
        </div>
      </div>
      <div style="margin-top: 7vw">
        <el-row :gutter="50">
          <el-col :span="6"
            ><div class="list-item" @click="goAbout">
              <img src="@/assets/cnki.png" style="width: 100%" />
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="list-item" @click="goPath('file')">
              <img src="@/assets/file.png" style="width: 100%" /></div
          ></el-col>
          <!-- @click="goPath('infp')" -->
          <el-col :span="6"
            ><div class="list-item" @click="goPath('infp')">
              <img
                src="@/assets/print_collectTickets.png"
                style="width: 100%"
              /></div
          ></el-col>
          <el-col :span="6"
            ><div class="list-item" @click="goHttp">
              <img
                src="@/assets/invoiceVerification.png"
                style="width: 100%"
              /></div
          ></el-col>
        </el-row>
      </div>
      <div class="home-list">
        <img
          @click="goPath('user')"
          src="@/assets/reimburser.png"
          style="width: 6vw; cursor: pointer; margin-right: 50px"
        />
        <img
          @click="goPath('log')"
          src="@/assets/record.png"
          style="width: 6vw; cursor: pointer; margin-right: 50px"
        />
        <img
          @click="goPath('type')"
          src="@/assets/type.png"
          style="width: 6vw; cursor: pointer; margin-right: 50px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCout, resetUserPwd } from "@/api";
import { listCompany } from "@/api/business/company";
import { listAllInvoiceExpensesUser } from "@/api/business/invoiceExpensesUser";
import { listAllInvoiceExpensesType } from "@/api/business/invoiceExpensesType";
export default {
  name: "HomeView",
  data() {
    return {
      companyList: [],
      typeList: [],
      num: 0,
      limitCount: 0,
      deptName: "",
      taxpayerNum: "",
      selectId: "",
    };
  },
  created() {
    if (localStorage.getItem("selectCompany")) {
      const company = JSON.parse(localStorage.getItem("selectCompany"));
      this.deptName = company.deptName;
      this.taxpayerNum = company.taxpayerNum;
      this.selectId = company.deptId;
    }
    this.getCompany();
  },
  methods: {
    // 公司列表
    getCompany() {
      listCompany().then((response) => {
        const companyList = response.data;
        if (localStorage.getItem("selectCompany")) {
          const str = companyList.find((item) => item.deptId === this.selectId);
          if (!str) {
            localStorage.removeItem("selectCompany");
            this.$router.push("/company");
            return;
          }
          this.getUser();
          this.getType();
          this.getNum();
        } else {
          if (companyList.length > 0) {
            localStorage.setItem(
              "selectCompany",
              JSON.stringify(companyList[0])
            );
            this.deptName = companyList[0].deptName;
            this.taxpayerNum = companyList[0].taxpayerNum;
            this.selectId = companyList[0].deptId;
            this.getUser();
            this.getType();
            this.getNum();
          } else {
            this.$router.push("/company");
          }
        }
      });
    },
    /** 查询报销人列表 */
    getUser() {
      listAllInvoiceExpensesUser({ parentDeptId: this.selectId }).then(
        (response) => {
          this.companyList = response.data;
        }
      );
    },
    /** 查询报销类型列表 */
    getType() {
      listAllInvoiceExpensesType({ deptId: this.selectId }).then((response) => {
        this.typeList = response.data;
      });
    },
    goAbout() {
      if (this.companyList.length === 0) {
        this.$modal
          .confirm("你还没有添加报销人，请前去添加报销人")
          .then(() => {
            this.$router.push("user");
          })
          .catch(() => {});
        return;
      }
      if (this.typeList.length === 0) {
        this.$modal
          .confirm("你还没有添加报销类型，请前去添加报销类型")
          .then(() => {
            this.$router.push("type");
          })
          .catch(() => {});
        return;
      }
      this.$router.push("about");
    },
    getNum() {
      getCout({ deptId: this.selectId }).then((res) => {
        this.num = res.data?.count;
        this.limitCount = res.data?.limitCount;
      });
    },
    goPath(path) {
      this.$router.push(path);
    },
    goHttp() {
      window.open(
        "https://inv-veri.chinatax.gov.cn/index.html?eqid=f11343200008e5cb00000004649937b9"
      );
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/";
          });
        })
        .catch(() => {});
    },
    handleResetPwd() {
      this.$prompt("请输入新密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
      })
        .then(({ value }) => {
          resetUserPwd({ password: value }).then((response) => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.nav {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background: #1890ff;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}
.right-menu {
  /* margin-left: 10px; */
  /* height: 100%;
  line-height: 50px; */
  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  .avatar-container {
    margin-right: 10px;
    .avatar-wrapper {
      margin-top: 5px;
      position: relative;
      .user-avatar {
        cursor: pointer;
        width: 35px;
        height: 35px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -13px;
        top: 22px;
        font-size: 14px;
      }
    }
  }
}
.home-con {
  padding: 3.6vw 9.4vw;
  box-sizing: border-box;
}
.company {
  font-size: 14px;
  margin-left: auto;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid #d5d5d5;
  display: flex;
  align-items: center;
}
.company-but {
  margin-left: 20px;
  width: 50px;
  height: 50px;
  background: #1890ff;
  display: flex;
  flex-direction: column;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.home-list {
  display: flex;
  align-items: center;
  margin-top: 7vw;
}
.list-item {
  width: 100%;
  cursor: pointer;
}
.bg-a {
  border: 1px solid #4b69eb;
  background: #f6f8ff;
  color: #4b69eb;
}
.bg-b {
  border: 1px solid #36a7ff;
  background: #f4faff;
  color: #36a7ff;
}
.bg-c {
  border: 1px solid #24d59c;
  background: #f5fffc;
  color: #24d59c;
}
.bg-d {
  border: 1px solid #f96837;
  background: #fff5f2;
  color: #f96837;
}
</style>
